<template>
    <el-container class="main-container">
        <el-header>
            <el-row class="article-header">
                <h5 class="column-name"></h5>
                <h4>Star Wars: The Last Stand</h4>
            </el-row>
        </el-header>

        <el-main class="article-content">
            <div class="article-video" style="position:relative;z-index:-1;">
                <video-player  class="video-player vjs-custom-skin"
                    ref="videoPlayer" 
                    :playsinline="true" 
                    :options="playerOptions"
                   ></video-player>
            </div>

            <p>
                很荣幸能够给中国移动某场馆制作馆内视频，内包含的量比较大，暂时就放两个完整的片头<br/>
                制作难度其实不是太大，就是搭场景，上材质， 拷贝，需要窗戶门，每個街道的重建，<br/>
                而且视频尺寸是8k的，渲染和合成都有一种一步一卡的赶脚<br/>
                最终也是磕下來了，也感謝小夥伴一起努力<br/>
            </p>

            <p>
                模型場景：海旭，彬彬<br/>
                动画：斌斌、宽宽<br/>
            </p>

            <p>
                <img :src="articlePhoneImg">
            </p>

            <p>
                很荣幸能够给中国移动某场馆制作馆内视频，内包含的量比较大，暂时就放两个完整的片头<br/>
                制作难度其实不是太大，就是搭场景，上材质， 拷贝，需要窗戶门，每個街道的重建，<br/>
                而且视频尺寸是8k的，渲染和合成都有一种一步一卡的赶脚<br/>
                最终也是磕下來了，也感謝小夥伴一起努力<br/>
            </p>

            <p>
                模型場景：海旭，彬彬<br/>
                动画：斌斌、宽宽<br/>
            </p>

        </el-main>
    </el-container>
</template>

<script>

import articlePhoneImg from "../../assets/images/article_phone.png";

export default{
    name : "richText",
    data() {
        return {
            articlePhoneImg: articlePhoneImg,
            videoFlag: true,
            playerOptions: {
                playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                autoplay: false, //如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 导致视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [{
                type: "video/mp4",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm" //url地址
                }],
                poster: "", //你的封面地址
                // width: document.documentElement.clientWidth, //播放器宽度
                notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true,
                    durationDisplay: true,
                    remainingTimeDisplay: false,
                    fullscreenToggle: true  //全屏按钮
                }
            }
        }
    }
}
</script>

<style>

    .el-header{
        margin-top:19.5%;
    }

    .article-header{
        text-align:center;
        font-size:0.20rem;
    }

    .article-header h4{
        margin-top:20px;
        font-size:0.33rem
    }

    .article-content{
        margin-top:1.1rem;
        margin-left:12%;
        margin-right:12%;
        font-size: .16rem;
        line-height: .4rem;
    }

    .article-content p{
        margin-top:0.51rem;
    }

    .el-header{
        z-index:-1;
    }

    @media screen and (max-width: 768px) {

       .column-name:after{
           background-size: 9%;
       }

       .article-content{
            margin-top:0.9rem;
            margin-left:2%;
            margin-right:2%;
            font-size: .2rem;
            line-height: .4rem;
        }

        .el-carousel__container{
            height: 1.5rem
        }

        .el-header{
            margin-top:40px;
        }
    }
</style>